<template>
  <div>
	
	<myheader></myheader>

	<br>
		<!-- 面包屑导航 -->
		<Breadcrumb :datas='datas'></Breadcrumb>
		<!-- <div>
			<div v-width="300"><AutoComplete :option="param" v-model="value" @change="onChange" type="title"></AutoComplete>
			</div>
		</div> -->
	<section class="featured-block text-center">
		
		<div class="container">
			<div v-bg-color:gray2 v-width="400" v-padding="20">
				<div class="h-panel h-panel-no-border">
				  <div class="h-panel-bar">
					<span class="h-panel-title">以下是您检索到的商品:</span>
				  </div>
				  <div class="h-panel-body" v-for="(item, index) in search_list" :key="index">
					<!-- <p>{{ item }}</p> -->
					<p>商品名称:<a :href="'/item?id=' + item.id"> {{ item.name }} </a></p>
				  </div>
				</div>
			</div>
			
			<!-- <table>

				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						用户名 :
					</td>
					<td style='padding: 5px;'>
						<input type="text" name="" id="">
					</td>
				</tr>

			</table> -->

		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

import {config} from '../config.js';

// import jsonp from 'fetch-jsonp';
// const loadData = function (filter, callback) {
//   // this 为 option 配置
//   // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
//   jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
//     .then(response => response.json())
//     .then((d) => {
//       callback(d.result.map((r) => {
//         return r[0];
//       }));
//     });
// };


export default {
  data () {
    return {
	  //声明面包屑变量
	  datas:[{title:'首页',route:{name:'index'}},{title:'商品检索'}],
	  word:'',

	  search_list:[],
	  detail_list:[],

	  //定义商品标签变量
	  color:'',
	  season:"",

	  //智能提示控件
	//   value: '测试',
    //   param: {
    //     orgId: 1, // 自定义参数传递
    //     loadData,
    //     minWord: 1
    //   }

    }
  },

  //注册组件标签
  components:{
	'myheader': myheader,
	'myfooter': myfooter,

  },

  //监听属性
  watch:{
	  $route(tpo,from){
		  //vue原生语法刷新页面
		  this.$router.go(0);
		  
	  }
  },

  mounted:function(){
	  //接收word参数
	  var word = this.$route.query.word; 
	  this.word = word
	  console.log(this.word)

	  //获取检索信息
	  this.goods_search()

   
  
},
  methods:{
	  //获取检索信息
	  goods_search:function(){
		  //进行非空验证
		  if(this.word != ""){
			   //向后端发送请求
		  	this.axios.get(config['after_end'] + '/goodssearch/',{params:{word:this.word}}).then((result)=>{
			  	//打印接口返回值
			  	console.log(result)

			  	this.search_list = result.data;

			  	for(let i=0,l=this.search_list.length;i<l;i++){
				  	var parms = result.data[i].parms;
				  	parms = JSON.parse(parms)
				  	this.color = parms.color
				  	this.season = parms.season
					//   console.log(parms)
					//   console.log(this.color)
					//   console.log(this.season)

			  	}	  
				
				// if(this.search_list.length = 0){
				// 	this.$Message("很抱歉,暂时未找到您搜索的商品")
				// }

		  	})

		  }

	  },

	  //定义 on change
	  		//关键词变更
	//   onChange(data, trigger) {
    //   	console.log(data, trigger);
    // }

  }
}


</script>
 
<style>



</style>